<template>
  <q-card>
    <div ref="piechart" style="height: 400px"></div>
    <q-resize-observer @resize="onResize" />
  </q-card>
</template>

<script setup>
import { markRaw, onMounted, ref, watch } from "vue";

const echarts = require("echarts");
const chart = ref(null);
const piechart = ref(null);

onMounted(() => {
  init();
});

const init = () => {
  let ct = piechart.value;
  echarts.dispose(ct);
  chart.value = markRaw(echarts.init(ct, ""));
  chart.value.setOption(options.value);
};
const onResize = () => {
  chart.value.resize();
};

const options = ref({
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "Search Engine" },
        { value: 735, name: "Direct" },
        { value: 580, name: "Email" },
        { value: 484, name: "Union Ads" },
        { value: 300, name: "Video Ads" },
      ],
    },
  ],
});
</script>
